@include('Home.head')

<body>

<div class="container" id="app">

    <header data-am-widget="header" class="am-header am-header-default my-header">

        <div class="am-header-left am-header-nav">
            <a  onclick="javascript:history.back(-1);" class="">
                <i class="am-header-icon am-icon-chevron-left"></i>
            </a>
        </div>
        <h1 class="am-header-title">

            <a href="#title-link" class="" >添加地址</a>

        </h1>
        <div class="am-header-right am-header-nav">
            <a href="#right-link" class="">
                <i class="am-header-icon  am-icon-home"></i>
            </a>
        </div>
    </header>
    <div class="gray-panel">
        <div class="my-search-title-panel am-text-sm am-margin-bottom-sm"><i class="am-icon-lightbulb-o am-text-danger"></i> 提示：实际的运费可能因为收货地址的不同而有差异，具体以提交之后系统计算或卖家协商为准</div>
        <div class="paoduct-title-panel">
            <h2 class="checkout-h2"><span class="am-badge am-round am-badge-warning ">1</span> 添加收货地址</h2>
            <p><i class="am-icon-location-arrow"></i> 收货地址</p>
            <form class="am-form am-form-inline">
                <p>
                <div id="address-form" data-toggle="distpicker">
                    <label class="sr-only" for="province1">Province</label>
                    <select id="province1" v-model="address.province" required>
                    </select>
                    <div class="form-group">
                        <label for="city1">City</label>
                        <select class="form-control" id="city1" v-model="address.city" required>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="district1" >District</label>
                        <select class="form-control" id="district1" v-model="address.district">
                        </select>
                    </div>
                </div>
                </p>
                <div class="am-form-group">
                    <input type="text" v-model="address.address" class="am-form-field am-radius" placeholder="详细地址">
                </div>
                <hr data-am-widget="divider"  style="" class="am-divider-default am-margin-bottom-sm"/>
                {{--<div class="am-form-group am-form-icon">--}}
                    {{--<i class="am-icon-circle"></i>--}}
                    {{--<input type="text" v-model="address.zip_code" class="am-form-field am-radius" placeholder="邮政编码">--}}
                {{--</div>--}}
                <div class="am-form-group am-form-icon">
                    <i class="am-icon-user"></i>
                    <input type="text" v-model="address.name" class="am-form-field am-radius" placeholder="真实姓名">
                </div>
                <div class="am-form-group am-form-icon">
                    <i class="am-icon-phone"></i>
                    <input type="text" v-model="address.phone" class="am-form-field am-radius" placeholder="手机号码">
                </div>
                {{--<div class="am-form-group am-form-icon">--}}
                    {{--<i class="am-icon-phone-square"></i>--}}
                    {{--<input type="text" v-model="address.landline" class="am-form-field am-radius" placeholder="电话号码">--}}
                {{--</div>--}}
                <div class="am-form-group am-form-icon">
                    <label class="am-checkbox-inline">
                        <input type="checkbox" v-model="address.default" data-am-ucheck> 设为默认地址
                    </label>
                </div>
                <input type="hidden" value="1" name="paytype" id="paytype">

                <p class="am-text-center"><button type="button" class="am-btn am-btn-danger am-radius am-btn-block" v-on:click="add()" style="border-radius: 50px;border: none;">确定</button></p>

            </form>
        </div>
    </div>

    @include('Home.foot')
</div>
</body>
<script src="{{ URL::asset('js/address/distpicker.data.js') }}"></script>
<script src="{{ URL::asset('js/address/distpicker.js') }}"></script>
<script src="{{ URL::asset('js/address/main.js') }}"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            address: {
                'id':'' ,
                'uid':'',
                'phone':'',
                'zip_code':'',
                'landline':'',
                'name':'',
                'province':'',
                'city':'',
                'district':'',
                'address':'',
                'default':true,
            }
        },
        methods: {
            //初始化 系统管理员列表
            initialize:function () {
                //编辑
                var id = this.obtain('id');
                if(id > 0){
                    $.post("/home/member/addaddress",{'_token':'{{csrf_token()}}',id:id,class:'find'},function (res) {
                        if(res.code){
                            app.address = res.data
                            $('#address-form').distpicker('destroy');
                            $("#address-form").distpicker({
                                province: app.address.province,
                                city: app.address.city,
                                district: app.address.district
                            });
                        } else {
                            layer.msg(res.data);
                        }
                    });
                }

            },
            //获取url id
            obtain:function (val) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    if(pair[0] == val){
                        return pair[1];
                    }
                }
            },
            isEmpty:function(obj) {
                if (obj === null) return true;
                if (typeof obj === 'undefined') {
                    return true;
                }
                if (typeof obj === 'string') {
                    if (obj === "") {
                        return true;
                    }
                    var reg = new RegExp("^([ ]+)|([　]+)$");
                    return reg.test(obj);
                }
                return false;
            },
            add:function () {
                app.address.province = $("#province1").val();
                app.address.city = $("#city1").val();
                app.address.district = $("#district1").val();

                if (app.address.default) {
                    app.address.default = 1
                }else {
                    app.address.default = 0
                }

                if( app.isEmpty(app.address.province) ){
                    layer.msg('请选择所在省份!');
                    return false;
                }
                if( app.isEmpty(app.address.city) ){
                    layer.msg('请选择所在市!');
                    return false;
                }
                if( app.isEmpty(app.address.district) ){
                    layer.msg('请选择所在区!');
                    return false;
                }
                if( app.isEmpty(app.address.address) ){
                    layer.msg('请输入详细地址!');
                    return false;
                }
                if(!(/^[1][3,4,5,7,8,9][0-9]{9}$/.test(app.address.phone))){
                    layer.msg('请输入正确的电话号码');
                    return false;
                }
                $.post("/home/member/addaddress",{'_token':'{{csrf_token()}}',class:'add',address:app.address},function (res) {
                    if(res.code){
                        layer.msg(res.data,{time:500},function () {
                            window.location.href="/home/member/addresslist";
                        });
                    } else {
                        layer.msg(res.data);
                    }
                });
            }
        },
        //自动执行
        mounted: function () {
            this.initialize();//分公司
        },
    });
</script>
</html>
